<template>
    <div class="prescription-list">
        <h2 class="title">处方列表</h2>
      <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
        <el-form-item label="处方号" prop="preId">
          <el-input v-model="queryParams.preId" placeholder="请输入处方号" clearable size="small"
                    @keyup.enter.native="handleQuery" />
        </el-form-item>
        <el-form-item label="就诊日期" prop="time">
          <el-date-picker clearable size="small" v-model="queryParams.time" type="date" value-format="yyyy-MM-dd"
                          placeholder="选择就诊日期">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
        <div class="table">
            <el-table
                :data="tableData"
                border
                fit
                style="width: 100%"
                header-cell-class-name="table-header-cell"
                :class="tableData.length === 0 ? 'table-empty' : ''" v-loading="loading" @selection-change="handleSelectionChange"
            >
              <el-table-column label="序号" type="index" width="80">
              </el-table-column>
              <el-table-column label="处方流水号" align="center" prop="pre_id" />
              <el-table-column label="就诊流水号" align="center" prop="clinic_id" />
              <!-- <el-table-column label="医院名称" align="center" prop="hospitalName" /> -->
              <el-table-column label="医院名称" align="center" prop="hospitalName">
                <!--<template slot-scope="scope">
                  <span v-if="scope.$index === 1">遵义市汇川区毛石镇中坝村中心卫生室</span>
                  <span v-else-if="scope.$index === 2">遵义市汇川区毛石镇大梨村卫生室</span>
                  <span v-else-if="scope.$index === 3">遵义市汇川区毛石镇乐遥村卫生室</span>
                  <span v-else-if="scope.$index === 4">遵义市汇川区上海路街道新桥社区卫生室</span>
                  <span v-else-if="scope.$index === 5">遵义市汇川区毛石镇卫生院</span>
                  <span v-else-if="scope.$index === 6">汇川广庆医院</span>
                  <span v-else-if="scope.$index === 7">遵义市汇川区董公寺街道烂田社区卫生室</span>
                  <span v-else-if="scope.$index === 8">遵义市汇川区泗渡镇观坝社区中心卫生室</span>
                  <span v-else-if="scope.$index === 9">遵义市汇川区高坪街道联丰村卫生室</span>
                  <span v-else-if="scope.$index === 10">遵义市汇川区沙湾镇米粮村卫生室</span>
                  <span v-else-if="scope.$index === 0">遵义市汇川区沙湾镇米粮村卫生室</span>
                </template>-->
              </el-table-column>
              <el-table-column label="科室名称" align="center" prop="departmentName" />
              <!-- <el-table-column label="监控" align="center" prop="patient_name" /> -->
              <el-table-column label="监控" align="center" prop="total">
                <!--<template slot-scope="scope">
                  <span>{{ generateRandomNumber() }} 路监控</span>
                </template>-->
              </el-table-column>
              <el-table-column label="患者姓名" align="center" prop="patientName">

              </el-table-column>>

              <el-table-column label="处方日期" align="center" prop="pre_time" />
                <el-table-column label="" width="300">
                    <template slot-scope="scope">
                        <div class="operation">
                            <div @click="handleView(scope)">查看</div>
                        </div>
                    </template>
                </el-table-column>
            </el-table>
        </div>
      <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
                  @pagination="getList" />
    </div>
</template>
<script>

import moment from "moment";
import { listPre, selectVisit } from "@/api/system/nation";
export default {
    name: 'PrescriptionList',
    data() {
        return {
          // 遮罩层
          loading: true,
          // 导出遮罩层
          exportLoading: false,
          // 选中数组
          ids: [],
          // 非单个禁用
          single: true,
          // 非多个禁用
          multiple: true,
          // 显示搜索条件
          showSearch: true,
          // 总条数
          total: 0,
          // 弹出层标题
          title: "",
          // 是否显示弹出层
          open: false,
          // 查询参数
          queryParams: {
            pageNum: 1,
            pageSize: 10,
            preId: null,
            time: null,
          },
          // 表单参数
          form: {},
          // 表单校验
          rules: {
          },
            keyword: '',
            tableData: [
                {
                    order: '01',
                    code: '1273278',
                    hospitalName: '板桥医院',
                    departmentName: '妇产科',
                    monitor: '2路',
                    patientName: '王名',
                    date: '2024-03-12 12:30:00',
                },
                {
                    order: '02',
                    code: '1273278',
                    hospitalName: '板桥医院',
                    departmentName: '妇产科',
                    monitor: '2路',
                    patientName: '王名',
                    date: '2024-03-12 12:30:00',
                },
            ]
        }
    },
  created() {
    this.getList()
  },
    methods: {
      handleQuery() {
        console.log(this.queryParams.time)
        if(this.queryParams.time === null){
          this.$modal.msgError("请选择就诊日期");
          return
        }
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        this.resetForm("queryForm");
        this.handleQuery();
      },
      handleSelectionChange(selection) {
        this.ids = selection.map(item => item.id)
        this.single = selection.length!==1
        this.multiple = !selection.length
      },
      formattedTime(time) {
        return moment(time).format('YYYY-MM-DD'); // 这里的'time'为传递到组件的时间数据
      },
      generateRandomNumber() {
        // 生成一个 1 到 100 之间的随机数
        return Math.floor(Math.random() * 100) + 1;
      },
      /** 查询【请填写功能名称】列表 */
      getList() {
        if (this.queryParams.time == null){
          const now = new Date()
          // now.setDate(now.getDate() -1)
          now.setDate(now.getDate())
          this.queryParams.time = this.formattedTime(now.toLocaleString());
        }
        this.loading = true;
        listPre(this.queryParams).then(response => {
          this.tableData = response.rows;
          this.total = response.total;
          this.loading = false;
        });
      },
      handleView(scope) {
        this.$router.push({ name: 'prescriptionDetail', params: { number: scope.row}});
      }
    }
}
</script>
<style scoped lang="scss">
.prescription-list {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.title {
    font-size: 26px;
    color: #4B4B4B;
    font-weight: bold;
    margin: 18px 0 24px;
}
.search-input {
    width: 264px;
    height: 47px;
    background: #FFFFFF;
    border-radius: 5px;

    ::v-deep input {
        line-height: 45px;
        height: 47px;
        display: inline-block;
    }

    ::v-deep .el-input__icon {
        line-height: 45px;
        height: 45px;
        vertical-align: -0.15em;
        color: #4373F1;
    }
}

.table {
    flex: 1;
    background-color: #fff;
    margin: 13px 0 16px;

    ::v-deep .table-header-cell {
        background-color: #EBEFF8;
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    .el-table {
        height: 100%;
    }
    ::v-deep .el-table__cell {
        padding-left: 21px;
        font-weight: 500;
        font-size: 16px;
        color: #414141;
    }
    :v-deep .el-table__body-wrapper {
        height: 100%;
    }
    :v-deep .el-table__empty-block {
        height: 100%;
    }
    .operation {
        display: flex;
        align-items: center;
        height: 100%;

        .view, .edit, .delete {
            cursor: pointer;
            font-weight: 500;
            font-size: 16px;
            color: #4373F1;
            height: 16px;
            line-height: 16px;
            background-repeat: no-repeat;
            background-position: 0 center;
            user-select: none;
        }
    }
}
</style>
